<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<style>
		#app{
			perspective:1000px;
		}
		.box{
			width: 200px;
			height: 200px;
			margin: 100px auto;
			position:relative;
			transform-style:preserve-3d;
			transform-origin:center center 100px;
		}
		.box div{
			width: 100%;
			height:100%;
			text-align:center;
			line-height:200px;
			color:#fff;
			position:absolute;
			left:0;
			top:0;
			opacity: .8;
		}
		.back{
			background-color:#ff557f;
		}
		.right{
			background-color:#f90004;
			transform:rotateY(90deg);
			transform-origin: right;/* 变换的基点 */
		}
		.left{
			background-color:#aa00ff;
			transform:rotateY(-90deg);
			transform-origin: left;/* 变换的基点 */
		}
		.top{
			background-color:#ffaa00;
			transform:rotateX(90deg);
			transform-origin: top;/* 变换的基点 */
		}
		.bottom{
			background-color:#00c660;
			transform:rotateX(-90deg);
			transform-origin: bottom;/* 变换的基点 */
		}
		.front{
			background-color:#434fff;
			transform:translateZ(200px);
				
		}
	</style>
	<body>
		<div id='app'>
			<div class="box" :style="{
				transform: 'rotateY('+y+'deg) rotateX('+x+'deg)'
			}">
				<div class="back">后</div>
				<div class="right">右</div>
				<div class="left">左</div>
				<div class="top">上</div>
				<div class="bottom">下</div>
				<div class="front">前</div>
			</div>
		</div>
		<script>
			Vue.createApp({
				data(){
					return{
						x:0,
						y:0
					}
				},
				mounted(){//关在完成2 keydown keyup
					document.addEventListener('keydown',this.rotate) //整个文档绑定键盘事件
				},
				methods:{
					rotate(e){
						let code=e.keyCode
						switch (code){
							case 37://左上右下
							    this.y-=5
							break;
							case 38:
							    this.x+=5
							break;
							case 39:
						        this.y+=5
							break;
							case 40:
							    this.x-=5
							break;
						}
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>